前幾年寫過鐵人賽
https://ithelp.ithome.com.tw/users/20127836/ironman/3077
不過當時的帳號是用FB登入的
然後iT邦的FB登入壞了
只好辦個新帳號重新來過

最近剛完成討論版的架設
正好趁著記憶猶新的時候寫這篇 也算是幫自己做開發的總結

先回答幾個問題

什麼是Nextjs

Next.js 是一個幫助我們更容易建網站的工具，它是基於 React 這個流行的 JavaScript 程式庫
網站在這裡

他同時具備了以下幾個特點

1. SSR / Server side render
   • 讓網頁在伺服器端先準備好 並直接拿到使用者面前 這讓使用者每次都可以拿到最新的內容
   • 增加你的網站被Google收錄的機會
2. CSR / Client side render
   • 當某部分內容需要更新時 不必像SSR那樣需要每次都等待伺服器重新產生頁面 只需要更換當中的內容就好 對使用者來說更友好
   • 開發者可以更自由地控制前端顯示邏輯
3. SSG / Static Site Generation
   • 他的頁面是提前準備好並儲存在伺服器上 所以當使用者訪問時 可以最快速的回應使用者
   • 適用於不經常更新的頁面 例如Blog, 公司官網等等
4. ISR / Incremental Static Regeneration
   • 他也是事先準備好並儲存在伺服器上 但可以在背景中自己更新 同時具有SSG的優點 但又不必每次都重新編譯網站
   • 適用於偶爾需要更新的畫面 例如產品介紹頁面等
5. 後端路由
   • 他在同一的專案內就可以處理後端路由 簡化開發流程
   • 路由使用檔案式路由 只要創建檔案 路由就會自己生成

什麼是Xata

他是一個serverless的Postgres服務
網站在這裡

那為什麼不用neon就好
我知道你要問這個
理由在於Xata免費層就提供了15GB的空間 而neon只有500mb
他有解釋為什麼他有辦法提供這麼高的免費額度
同時他還有storage的功能
可以讓你直接儲存file 不必另外找地方放
並且可以把它當DB的一個欄位
例如

  const thread = await xata.db.threads.create({
      title: title.trim() || 'Untitled',
      name: name.trim() || 'anonymous',
      content,
      image: image // 這裡可以直接儲存檔案
        ? {
            name: encodeURIComponent(image.name),
            mediaType: image.type,
            base64Content: await fileToBase64(image),
            enablePublicUrl: true,
          }
        : undefined,
    });

這減少了很多的開發成本

會建議先了解的知識

Node

你會需要先安裝Node才有辦法繼續往下做
什麼是Node及怎麼安裝 版上有很多文章可以參考

React

因為主題會是Nextjs
所以我雖然會提到觀念但我不會詳細解釋

Tailwind

純粹我不會css 所以都用Tailwind

Typescript

Nextjs預設使用TS開發
所以全部的程式碼都使用TS來寫

明天開始我們就會正式進入程式碼的部分